<template>
  <common-detail-list title="历史记录">
    <el-button slot="header" @click="back">返回</el-button>

    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :model="query"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
        @submit.native.prevent
        label-width="62px"
      >
        <el-form-item label="主机IP">
          <common-input v-model="query.assetId" clearable />
        </el-form-item>

        <el-form-item label="采集时间">
          <el-date-picker
            v-model="query.daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            align="right"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="是否告警">
          <el-select v-model="query.existAlarm" placeholder="" clearable>
            <el-option label="是" value="0"></el-option>
            <el-option label="否" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="有无工单">
          <el-select v-model="query.existOrder" placeholder="" clearable>
            <el-option label="有" value="0"></el-option>
            <el-option label="无" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>

    <common-table slot="content" v-loading="loading" :data="list">
      <el-table-column label="主机IP" align="left" prop="assetId">
        <template slot-scope="{ row }">{{ row.assetId }}</template>
      </el-table-column>

      <el-table-column label="系统模块名称" align="left" prop="systemName">
        <template slot-scope="{ row }">{{ row.systemName }}</template>
      </el-table-column>

      <el-table-column label="采集时间" align="left" prop="collectTime">
        <template slot-scope="{ row }">{{ row.collectTime }}</template>
      </el-table-column>

      <el-table-column label="巡检参数" align="left" prop="inspectionParam">
        <template slot-scope="{ row }">{{ row.inspectionParam }}</template>
      </el-table-column>

      <el-table-column label="是否告警" align="left" prop="status">
        <template slot-scope="{ row }">
          <span v-if="row.existAlarm == 0">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column label="处理工单" align="left" prop="status">
        <template slot-scope="{ row }">
          <span v-if="!!row.workOrder">{{ row.workOrder }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="80">
        <template slot-scope="{ row }">
          <el-button type="text" @click="detail(row)">详情</el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />

    <common-info-dialog
      :visible.sync="dialogShow"
      @cancel="dialogShow = false"
      title="历史记录详情"
    >
      <common-group-title style="padding-left: 18px" title="基本信息" />
      <common-info-table :is-top-divided="true" :is-bottom-divided="true">
        <common-info-table-cell label="主机IP" width="50%">{{
          showItem.assetId
        }}</common-info-table-cell>
        <common-info-table-cell label="系统模块名称" width="50%">{{
          showItem.systemName
        }}</common-info-table-cell>
        <common-info-table-cell label="采集时间" width="50%">{{
          showItem.collectTime
        }}</common-info-table-cell>
        <common-info-table-cell label="是否告警" width="50%">{{
          showItem.existAlarm == 0 ? "是" : "否"
        }}</common-info-table-cell>
        <common-info-table-cell label="处理工单" width="100%">{{
          !!showItem.workOrder ? showItem.workOrder : "无"
        }}</common-info-table-cell>
      </common-info-table>
      <common-group-title style="padding-left: 18px" title="巡检结果" />
      <common-info-table :is-top-divided="true">
        <common-info-table-cell
          v-for="(item, index) in thresholdList"
          :key="index"
          :label="item.name"
          >{{ item.value }}</common-info-table-cell
        >
      </common-info-table>

      <!--      <el-form label-width="100px">-->
      <!--        <el-row :gutter="24">-->
      <!--          <p style="clear: both;border-left: 6px solid #000;padding-left: 10px;">基本信息</p>-->
      <!--          <el-col :span="12">-->
      <!--            <el-form-item label="主机IP">-->
      <!--              <span>{{ showItem.assetId }}</span>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->

      <!--          <el-col :span="12">-->
      <!--            <el-form-item label="系统模块名称">-->
      <!--              <span>{{ showItem.systemName }}</span>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->

      <!--          <el-col :span="12">-->
      <!--            <el-form-item label="采集时间">-->
      <!--              <span>{{ showItem.collectTime }}</span>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->

      <!--          <el-col :span="12">-->
      <!--            <el-form-item label="是否告警">-->
      <!--              <span v-if="showItem.existAlarm==0">是</span>-->
      <!--              <span v-else>否</span>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->

      <!--          <el-col :span="12">-->
      <!--            <el-form-item label="处理工单">-->
      <!--              <span v-if="!!showItem.workOrder">{{ showItem.workOrder }}</span>-->
      <!--              <span v-else>无</span>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->

      <!--          <p style="clear: both;border-left: 6px solid #000;padding-left: 10px;">巡检结果</p>-->

      <!--          <el-col :span="20" v-for="(item,index) in thresholdList" :key="index">-->
      <!--            {{ item.name }}{{ item.value }}-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-form>-->
    </common-info-dialog>
  </common-detail-list>
</template>

<script>
import { record_list } from "@/api/management/system/system.js";

export default {
  components: {},
  props: {
    inspectId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      total: 1, // 总条数
      loading: false, // table 加载中
      showSearch: true,
      dialogShow: false,
      showItem: {},
      list: [], // 数据列
      thresholdList: [], //阀值列表
      query: {
        pageNum: 1,
        pageSize: 10,
      }, // 查询条件
    };
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$emit("back");
    },
    /**
     * 获取列表
     */
    getList() {
      this.loading = true;
      this.query.inspectionId = this.inspectId;
      let query = { ...this.query };
      record_list(query).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    /**
     * 查询
     */
    handleQuery() {
      if (!!this.query.daterange) {
        this.query.beginTime = this.query.daterange[0];
        this.query.endTime = this.query.daterange[1];
      } else {
        this.query.beginTime = "";
        this.query.endTime = "";
      }
      this.query.pageNum = 1;
      this.getList();
    },
    /**
     * 重置查询
     */
    resetQuery() {
      this.query = this.$options.data().query;
      this.$refs.commonDept.clearDept();
      // this.getList()
    },
    detail(row) {
      this.dialogShow = true;
      this.showItem = row;
      this.thresholdList = [];
      const thresholdList = [];
      if (!!this.showItem.inspectionParam) {
        let inspection = this.showItem.inspectionParam.split(";");
        for (var i in inspection) {
          let item = inspection[i];
          let iName = item.split(":")[0];
          let iValue = item.split(":")[1];
          thresholdList.push({ name: iName, value: iValue });
        }
        this.thresholdList = thresholdList;
      }
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
